<template>
  <div style="background-color: #f5f7fa">
    <header class="header">
      <div class="header-container">
        <h1 class="logo">ipss课题组-闻敬谦</h1>
        <div class="login-btn-container">
          <button id="loginBtn" class="login-btn" @click="goBack">
            返回上一页
          </button>
        </div>
      </div>
    </header>
    <div class="page-wrap">
      <!-- 头部信息卡片 -->
      <el-card class="hero" shadow="hover">
        <div class="hero-inner">
          <el-avatar :size="120" :src="avatar" @error="() => true" />
          <div class="hero-text">
            <div class="name-row">
              <h1 class="name">闻敬谦</h1>
              <el-tag type="primary" round>讲师</el-tag>
              <el-tag round>硕导</el-tag>
            </div>
            <div class="subline">机械与车辆学院 · 工业工程专业</div>
          </div>
        </div>

        <el-divider />

        <!-- 基本信息 -->
        <el-descriptions :column="3" border size="large" class="basic">
          <el-descriptions-item label="办公地址">
            中关村校区第一教学楼 343
          </el-descriptions-item>
          <el-descriptions-item label="邮编">100081</el-descriptions-item>
          <el-descriptions-item label="邮箱">
            <el-link :href="`mailto:${email}`" type="primary">{{
              email
            }}</el-link>
          </el-descriptions-item>
        </el-descriptions>

        <el-alert
          title="教育经历"
          type="info"
          :closable="false"
          class="section-title"
        />
        <div class="edu-list">
          <ul>
            <li v-for="(e, i) in education" :key="i">
              {{ e.period }} {{ e.degree }} {{ e.institution }}
            </li>
          </ul>
        </div>

        <el-alert
          title="个人简介 / 研究方向"
          type="info"
          :closable="false"
          class="section-title"
        />
        <div class="intro">
          <p v-for="(line, i) in introParagraphs" :key="i">{{ line }}</p>
          <el-divider />
          <strong>研究方向：</strong> {{ researchTags.join("，") }}
          <br />
          <strong>招收方向：</strong> {{ recruitText }}
        </div>
      </el-card>

      <!-- 论文 / 项目 / 成果 / 职务 等 -->
      <el-card class="content-card" shadow="never">
        <el-tabs tab-position="top" class="tabs">
          <el-tab-pane label="代表性论文">
            <el-timeline>
              <el-timeline-item
                v-for="(p, i) in papers"
                :key="i"
                :timestamp="p.year"
                placement="top"
              >
                <div class="item-title">{{ p.citation }}</div>
                <div v-if="p.note" class="item-sub">{{ p.note }}</div>
              </el-timeline-item>
            </el-timeline>
          </el-tab-pane>

          <el-tab-pane label="代表性科研项目">
            <el-timeline>
              <el-timeline-item
                v-for="(pr, i) in projects"
                :key="i"
                :timestamp="pr.period"
                placement="top"
              >
                <div class="item-title">{{ pr.title }}</div>
                <div class="item-sub">{{ pr.extra }}</div>
              </el-timeline-item>
            </el-timeline>
          </el-tab-pane>

          <el-tab-pane label="成果及荣誉">
            <ul class="award-list">
              <li v-for="(a, i) in awards" :key="i">
                {{ a }}
              </li>
            </ul>
          </el-tab-pane>

          <el-tab-pane label="社会职务">
            <ul class="service-list">
              <li v-for="(s, i) in services" :key="i">
                {{ s }}
              </li>
            </ul>
          </el-tab-pane>
        </el-tabs>
      </el-card>

      <div class="source">
        数据来源：
        <el-link
          type="primary"
          href="https://me.bit.edu.cn/szdw/jsml/zzgcx/gygcyjs/gygcyjsqnjs/b25051.htm"
          target="_blank"
        >
          北京理工大学 机械与车辆学院 闻敬谦 教师页面
        </el-link>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";

// 使用 useRoute 获取路由参数
// const route = useRoute();
// const name = route.params.name; // 获取路由参数 name

const router = useRouter();
// 返回上一页
const goBack = () => {
  router.push({
    name: "HomePage",
    query: { tab_active: "members" },
  }); // 返回上一页
};

/** 头像（页面没明确给出照片，使用默认） */
const avatar = ref("/images/wenjingqian.png");

/** 联系方式 **/
const email = "wenjq@bit.edu.cn";

/** 教育经历 **/
const education = [
  {
    period: "2012-至今",
    degree: "讲师、硕导",
    institution:
      "北京理工大学 机械与车辆学院。主讲课程《机械制造工程学》、《先进制造系统》",
  },
  {
    period: "1996 — 2012",
    degree: "博士 (工业工程)",
    institution: "北京航空航天大学攻读本、硕、博学位，并做博士后。",
  },
];

/** 个人简介段落 **/
const introParagraphs = [
  "闻敬谦，男，北京理工大学机械与车辆学院讲师，硕士生导师，主讲课程《机械制造工程学》、《先进制造系统》。",
  "作为课题负责人承担国家重点研发、国防基础科研等项目，为装备制造企业研发生产管理、运维服务等系统，获得国防科技进步奖二等奖、企业管理进步奖等。",
  "针对大型复杂装备生产及维护的多样性特点，基于移动式制造单元和服务单元，研究制造及服务过程柔性化及智能化，主要开展传感检测、机器视觉等状态感知技术以及协同优化技术研究，探索面向个性化生产的智能制造及服务模式。",
];

/** 研究方向标签 **/
const researchTags = ["制造及服务过程柔性化及智能化", "智能制造", "协同优化"];

/** 招生 / 合作文案 **/
const recruitText = "机械工程、机械制造及其自动化、工业工程";

/** 代表性论文 **/
const papers = [
  {
    year: "2019",
    citation:
      "Wen Jingqian, Fan Yingdong, Hu Yaoguang, et al. The Optimization of Cutter Feed Rate and Flatness of Wheat Stubbles for Combine Harvester. 2019 IEEE 5th International Conference on Mechatronics System and Robots (ICMSR)[C]. IEEE, 2019:64-69.",
    note: "",
  },
  {
    year: "2019",
    citation:
      "Yindong Fan, Jingqian Wen, Hu Yaoguang. Computer Vision Measurement System for Measuring Elasticity Modulus of Straws. 2019 IEEE 4th International Conference on Image, Vision and Computing (ICIVC)[C]. IEEE, 2019:45-49",
    note: "",
  },
  {
    year: "2019",
    citation:
      "Wei, Li，Jingqian, Wen，Qing, Jiang，Liangtu, Song，Zhengyong, Zhang. Implementation of a Fuzzy Logic Control Strategy on a Harvester's Controller Based on MATLAB Environment[J]. International Journal of Pattern Recognition & Artificial Intelligence, Vol. 33, No. 13, 1959043 (2019)",
    note: "",
  },
  {
    year: "-",
    citation:
      "Ren W, Wen J, Guan Y, Hu Y. Joint optimization of energy-aware process planning and scheduling for machining-assembly system [J]. ( Flexible Services and Manufacturing Journal, SCI, IF:2.346)",
    note: "",
  },
  {
    year: "2019",
    citation:
      "Ren W, Wen J, Guan Y, Hu Y. A novel optimization method for modular facilities layout problem considering flexible processes [J]. Procedia CIRP, 2019, (CIRP-CMS 2019)",
    note: "",
  },
  {
    year: "2018",
    citation:
      "Ren W, Wen J, Guan Y, Hu Y. Research on assembly module partition for flexible production in mass customization [J]. Procedia CIRP, 2018, 72: 744-749. (CIRP-CMS 2018)",
    note: "",
  },
];

/** 代表性科研项目 **/
const projects = [
  {
    title: "国家重点研发项目，智能化稻麦联合收获技术与装备研发",
    period: "2017-2020",
    extra: "",
  },
  {
    title: "国防基础科研，综合电子一体化集成设计技术",
    period: "2017-2020",
    extra: "",
  },
  {
    title: "国防基础科研，基于虚拟现实的维修性设计与评估",
    period: "2015-2017",
    extra: "",
  },
];

/** 成果与荣誉 **/
const awards = ["1、国防科技进步奖二等奖（2）"];

/** 社会职务 **/
const services = [];
</script>

<style scoped>
.page-wrap {
  max-width: 1000px;
  margin: 0 auto;
  margin-top: 50px;
  padding: 24px 16px 60px;
  background: #f5f7fa;
}
.hero {
  border-radius: 16px;
  margin-bottom: 16px;
}
.hero-inner {
  display: grid;
  grid-template-columns: 120px 1fr;
  grid-gap: 20px;
  align-items: center;
}
.hero-text .name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.name {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
}
.subline {
  color: #666;
  margin-top: 6px;
}
.basic {
  margin-top: 12px;
}
.section-title {
  margin-top: 16px;
}
.edu-list ul {
  list-style: disc;
  margin: 8px 0 0 20px;
  padding: 0;
}
.intro {
  margin-top: 12px;
  line-height: 1.8;
  color: #333;
}
.content-card {
  border-radius: 16px;
  margin-top: 16px;
  padding: 8px 8px 16px;
}
.tabs :deep(.el-tabs__item) {
  font-size: 15px;
}
.item-title {
  font-weight: 600;
}
.item-sub {
  color: #666;
  margin-top: 4px;
}
.award-list,
.service-list {
  list-style: disc;
  margin: 8px 0 0 20px;
  padding: 0;
  color: #333;
}
.source {
  text-align: right;
  margin-top: 16px;
  color: #666;
  font-size: 13px;
}
@media (max-width: 640px) {
  .hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero-text .name-row {
    justify-content: center;
  }
}
/* Header */
.header {
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 16px 32px;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-size: 24px;
  font-weight: bold;
  color: #1e40af;
}

.login-btn-container {
  display: flex;
  align-items: center;
}

.login-btn {
  background-color: #2563eb;
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  transition: background-color 0.3s ease;
}

.login-btn:hover {
  background-color: #1d4ed8;
}
</style>
